import 'package:flutter/material.dart';
import 'package:splash_login/common/app_color.dart';
import 'package:splash_login/common/assets.dart';
import 'package:splash_login/common/button.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // 检查账号输入有效
  bool isUserNameValid = false;

  // 表单
  Widget _buildForm() {
    return Container(
        padding: const EdgeInsets.fromLTRB(20, 70, 20, 35),
        decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(35)),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Username
            const Text(
              'Username or E-Mail',
              style: TextStyle(
                  fontSize: 15,
                  fontWeight: FontWeight.w300,
                  color: Color(0xFF838383)),
            ),
            const SizedBox(
              height: 15,
            ),
            TextField(
              decoration: InputDecoration(
                  hintText: '@',
                  prefixIcon: Image.asset(
                    AssetsImages.iconUserPng,
                    width: 23,
                    height: 23,
                  ),
                  suffixIcon: isUserNameValid == true
                      ? Image.asset(
                          AssetsImages.iconOrderPng,
                          width: 24,
                          height: 16,
                        )
                      : null),
              onChanged: (value) {
                setState(() {
                  isUserNameValid = value.isNotEmpty && value.length > 6;
                });
              },
            ),
            const SizedBox(
              height: 35,
            ),
            // Password
            const Text(
              'Password',
              style: TextStyle(
                  fontSize: 15,
                  fontWeight: FontWeight.w300,
                  color: Color(0xFF838383)),
            ),
            TextField(
                decoration: InputDecoration(
                    hintText: '6 digits',
                    prefixIcon: Image.asset(
                      AssetsImages.iconLockPng,
                      width: 19,
                      height: 26,
                    ),
                    suffixIcon: TextButton(
                      onPressed: () {},
                      child: const Text(
                        'Forget?',
                        style: TextStyle(
                            fontSize: 15,
                            fontWeight: FontWeight.w500,
                            color: Color(0xFF0274BC)),
                      ),
                    ))),
            const SizedBox(
              height: 29,
            ),
            // Sign
            ButtonWidget(
              text: 'Sign In',
              height: 57,
              onPressed: () {},
            ),
            // SignUp
            const SizedBox(
              height: 15,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // 文字
                const Text(
                  "Don't have an account?",
                  style: TextStyle(
                      fontSize: 15,
                      fontWeight: FontWeight.w300,
                      color: Color(0xFF171717)),
                ),
                // 按钮
                TextButton(
                    onPressed: () {},
                    child: const Text(
                      'Sign Up',
                      style: TextStyle(
                          fontSize: 15,
                          fontWeight: FontWeight.bold,
                          color: Color(0xFF0274BC)),
                    ))
              ],
            )
            // end
          ],
        ));
  }

  // 主视图
  Widget _buildView() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // logo
          Image.asset(
            AssetsImages.logoPng,
            width: 60,
            height: 57,
          ),
          const SizedBox(
            height: 22,
          ),
          // 主标题
          const Text(
            "Let's Sign You In",
            style: TextStyle(
                fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
          ),
          const SizedBox(
            height: 10,
          ),
          // 子标题
          const Text(
            "Welcome back, you're been missed!",
            style: TextStyle(
                fontSize: 13,
                fontWeight: FontWeight.w300,
                color: Color(0xFFEEEEEE)),
          ),
          const SizedBox(
            height: 55,
          ),
          // 表单
          _buildForm()
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.bgSplash,
      body: _buildView(),
    );
  }
}
